<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>

    </div>
    <script>
        // class Watcher{
        //     constructor(fn){
        //         this.getter = fn
        //     }
        //     update(){
        //         this.getter()
        //     }
        // }
        // class Dep{
        //     constructor(){}
        //     subs = []
        //     addSubs(w){
        //         this.subs.push(w)
        //     }
        //     notify(){
        //         this.subs.forEach(item=>{
        //             item.update()
        //         })
        //     }

        // }
        // let w1 = new Watcher(()=>{console.log('渲染 watcher');})
        // let w2 = new Watcher(()=>{console.log('用户 watcher');})
        // let w3 = new Watcher(()=>{console.log('计算属性 watcher');})

        // let dep = new Dep
        // dep.addSubs(w1)
        // dep.addSubs(w2)
        // dep.addSubs(w3)
        // dep.notify()
        let obj = {
            name:'张三',
            age:18
        }
    defineReactive(obj, 'city')  
    function defineReactive(obj, key, val){
        val = val || obj[key]
        Object.defineProperty(obj, key, {
            set(newVal){
                val = newVal
            },
            get(){
                return val
            }
        })
    }
       
    </script>
</body>
</html>